<template>
    <div>
        <!--        导航栏-->
        <div>
            <van-nav-bar
                left-text="返回"
                right-text="搜索"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
            >
                <template
                    #title>
                    <van-search
                        shape="round"
                        v-model="value"
                        placeholder="请输入搜索关键词">
                        <template
                            #left-icon>
                            <van-icon
                                color="#ccc"
                                name="search"/>
                        </template>
                    </van-search>
                </template>
            </van-nav-bar>
        </div>

        <!--        好友列表-->
        <div class="chatFrame">
            <van-list>
                <van-cell v-for="item in list">
                    <template
                        #title>
                        <div class="cell">
                            <van-image
                                height="50"
                                radius="5"
                                :src="'/api/'+item.user.avatar"
                                width="50"/>
                            <div class="message">
                                <p class="custom-title">
                                    {{ item.user.name }}</p>
                                <span class="custom-title">{{ item.user.account }}</span>
                            </div>
                            <div class="addBtn">
                                <van-button
                                    type="primary"
                                    size="small"
                                    @click="AddFind(item.user.id)" :disabled="item.isFriend!=0">
                                    {{ item.isFriend == 0 ? '添加' : '已经是好友了' }}
                                </van-button>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </div>

        <van-dialog
            v-model:show="show"
            title="添加好友"
            show-cancel-button
            @confirm="confirm(friendId)"
        >
            <van-field v-model="addInformation" label="验证信息" placeholder="请输入验证信息"/>
            <van-field v-model="note" label="备注" placeholder="请输入备注"/>
        </van-dialog>
    </div>
</template>

<script
    setup
    lang="ts">
import {
    ref
} from 'vue';
// 搜索框
import {
    useFriendStore
} from "../../store/friend";
import {
    FindUserResponseData
} from "../../type/friend";

const onClickLeft = () => history.back();

// 搜索回调
const onClickRight = async () => {
    // 清空之前搜索的内容
    list.value = []
    //好友信息
    const findUser = await friendStore.getFindUser(value.value)
    // 将好友信息 添加到 list
    list.value.push(findUser)
};
const value = ref('');


// 搜索列表
const list = ref<FindUserResponseData[]>([]);

// 实例化 好友仓库
const friendStore = useFriendStore()

//是否显示添加弹窗
const show = ref(false);

//备注
const note = ref("")

//验证信息
const addInformation = ref("")

//添加回调
const AddFind = (id: number) => {
    friendId.value = id
    show.value = true
};

// 同意好友请求的id
const friendId = ref<number>(0)

//确认之后发送好友申请
const confirm = (id: number) => {
    friendStore.getAddFind(id, addInformation.value, note.value)
    //清空备注等信息
    note.value = ""
    addInformation.value =""
}


</script>

<style
    scoped
    lang="less">
.chatFrame {
    .cell {
        display: flex;
        justify-content: space-between;

        .message {
            width: 100%;
            flex: 1;
            margin-left: 0.7rem;
        }
    }
}

.van-cell {
    height: 4.3rem;
}

.addBtn {
    display: flex;
    align-items: center;
}
</style>